import React, { Component } from 'react'
import { TopNavHeader, HintMessage } from '../common'

export default class GiftCoupon extends Component {
  render() {
    return (
      <div className={`rt-gift-coupon-container cm-flex-container`}>
        <TopNavHeader title="赠券" />
        <HintMessage text="赠券余额：800.00" extraText="使用规则" />

        <div className={`rt-gift-coupon-list`}>
          {
            Array(1).fill(1).map(v => (
              <div key={Math.random()} className={`rt-gift-coupon`}>
                <div className={`rt-title-box`}>新用户注册赠券</div>
                <div className={`rt-content-box`}>
                  <div className={`rt-left-box`}>
                    <span>有效期至</span>
                    <span>2016年6月30日</span>
                  </div>

                  <div className={`rt-right-box`}>
                    <span>¥</span>
                    <span>100.00</span>
                  </div>
                </div>
                {/*position box left*/}
                <div className={`cm-circle`}></div>
                {/*position box right*/}
                <div className={`cm-circle rt-right`}></div>
              </div>
            ))
          }
          {
            Array(1).fill(2).map(v => (
              <div key={Math.random()} className={`rt-gift-coupon rt-has-brought`}>
                <div className={`rt-title-box`}>新用户注册赠券</div>
                <div className={`rt-content-box`}>
                  <div className={`rt-left-box`}>
                    <span>有效期至</span>
                    <span>2016年6月30日</span>
                  </div>

                  <div className={`rt-right-box`}>
                    <span>¥</span>
                    <span>100.00</span>
                  </div>
                </div>
                {/*position box left*/}
                <div className={`cm-circle`}></div>
                {/*position box right*/}
                <div className={`cm-circle rt-right`}></div>
              </div>
            ))
          }
        </div>
      </div>
    )
  }
}